<template>
	<view class="all">
		<u-tabs :list="list1" :scrollable="false" @change="tabs"></u-tabs>
		<u-empty v-show="show" mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png">
		</u-empty>
		<view v-show="!show" class="body">
			<view class="list" v-for="(item , index) in lists" :key="index">
				<view class="top flex_sp">
					<view class="left">
						{{item.note}}
					</view>
					<!-- 					<view class="right">
						服务护工：名称
					</view> -->
				</view>
				<view class="solid"></view>
				<view class="bot">
					<view class="one">
						<text class="s1">{{item.details[0].name}}</text>
						<text class="s2">x{{item.details[0].num}}</text>
					</view>
					<view class="two flex_sp">
						<view class="left">
							服务时间{{item.appointment_time}}
						</view>
						<view class="right">
							￥{{item.details[0].price}}
						</view>
					</view>
					<view class="three">
						<view class="box">
							联系客户
						</view>
						<view class="box">
							接单
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lists: [],
				list1: [{
					name: '全部',
				}, {
					name: '待接单',
				}, {
					name: '已接单'
				}, {
					name: '进行中'
				}, {
					name: '已完成'
				}],
				tab: 0,
				show: false
			};
		},
		onLoad() {
			this.getorder()
		},
		methods: {
			async getorder() {
				const res = this.$api('/business/order/index', 'post', {
					type: this.tab
				}).then((res) => {
					console.log(res);
					console.log(res.data.data.order);
					if (res.data.data.order.length == 0) {
						this.show = true
					} else {
						this.show = false
					}
					this.lists = res.data.data.order
				})
			},
			tabs(e) {
				this.tab = e.index
				this.getorder()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.all {
		padding: 15px;
		min-height: 100vh;
		background-color: #f5f5f5;

		.body {
			margin: 20px 0;

			.list {
				margin: 10px 0;
				padding: 15px;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 10px;
				opacity: 1;

				.top {
					font-size: 14px;
					font-weight: 400;
					color: #333333;
				}

				.solid {
					width: 100%;
					height: 1px;
					background-color: #eeeeee;
					margin: 10px 0;
				}

				.bot {
					.one {
						margin: 5px 0;

						.s1 {
							font-size: 16px;
							font-weight: bold;
							color: #333333;
						}

						.s2 {
							font-size: 12px;
							font-weight: bold;
							color: #FB774B;
						}
					}

					.two {
						margin: 5px 0;

						.left {
							font-size: 12px;
							font-weight: 400;
							color: #999999;
						}

						.right {
							font-size: 15px;
							font-weight: bold;
							color: #FF575B;
						}
					}

					.three {
						display: flex;
						align-items: center;
						justify-content: flex-end;

						.box {
							background: #FB774B;
							border-radius: 26px;
							font-size: 11px;
							font-weight: bold;
							color: #FFFFFF;
							text-align: center;
							padding: 5px 20px;
							margin: 0 5px;
						}
					}
				}
			}
		}
	}
</style>